import React, { useEffect, useRef, useState } from 'react'
import { Editor } from '@tinymce/tinymce-react';
import './index.less'

export default function EditorPlus(props) {
  const editorRef = useRef(null);
  const [id, setId] = useState('')
  //文本框失去焦点后的回调
  const handleEditorChange = () => {
    if (editorRef.current) {
      console.log(111);
      localStorage.setItem('newArticle', editorRef.current.getContent())
      let text = editorRef.current.getContent({ 'format': 'text' });//拿到纯文本
      props.setContentText(text)
    }
  };
  //获取要编辑的文章的内容
  const getContent = () => {
    if (id && editorRef.current) {
      editorRef.current.setContent()
    }

  }
  useEffect(() => {
    setId(props.id)
    getContent()
  }, [id,props.id])
  return (
    <>
      <Editor
        onInit={(evt, editor) => editorRef.current = editor}
        initialValue={localStorage.getItem(id)}
        apiKey='x8lsmvkvvs8r0s6k8zaf2i8m5tc7pu2o36cfrmdieenfwkoy'

        init={{
          language: 'zh_CN',//注意大小写 这里要自己去加汉化包
          auto_focus: true,
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
          ],
          toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
        onBlur={handleEditorChange}//失去焦点
      />
    </>
  );
}
